<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>

      <div style="padding: 5px 10px">
        <h3>监测项信息</h3>
        <table class="bs-table">
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">监测项</th>
            <td class="bs-table_td" colspan="3">GDP</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">上报周期</th>
            <td class="bs-table_td">季报</td>
            <th class="bs-table_th" style="width: 200px">是否可量化</th>
            <td class="bs-table_td">是</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th">责任部门</th>
            <td class="bs-table_td">省统计局</td>
            <th class="bs-table_th">配合部门</th>
            <td class="bs-table_td"></td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th">起止日期</th>
            <td class="bs-table_td" colspan="3">2018年1季度-2025年4季度</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th">描述</th>
            <td class="bs-table_td" colspan="3"></td>
          </tr>
        </table>
      </div>
      <div style="padding: 5px 10px">
      <h3>监测目标</h3>
      <el-collapse  v-model="activeNames">
          <el-collapse-item title="监测项目标信息" name="1">
            <template slot="title">
              <div class="card-header collapse-header">
                <div class="head-title collapse-title">监测项目标信息</div>
              </div>
            </template>
            <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th">年度</th>
                <th class="bs-table_th">目标值</th>
                <th class="bs-table_th">目标内容</th>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_td">2020年</th>
                <th class="bs-table_td">7.8</th>
                <th class="bs-table_td">到2020年，GDP达到7.8</th>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_td">2022年</th>
                <th class="bs-table_td">8.1</th>
                <th class="bs-table_td">到2022年，GDP达到8.1</th>
              </tr>
            </table>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div style="padding: 5px 10px">
        <div style="display:flex;justify-content: space-between;">
          <h3>进度信息</h3>
          <div class="form-submit">
            <el-button type="primary" @click.stop="goBack()">审核</el-button>
            <el-button type="info" @click.stop="goBack()">关闭</el-button>
          </div>
        </div>

        <table class="bs-table">
          <tr class="bs-table_row">
            <th class="bs-table_th">季度</th>
            <th class="bs-table_th">本级完成值</th>
            <th class="bs-table_th">存在困哪或问题（没有填顺利）</th>
            <th class="bs-table_th">下步工作计划</th>
            <th class="bs-table_th">状态</th>
            <th class="bs-table_th">操作</th>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_td">2018年三季度</th>
            <th class="bs-table_td">7.8</th>
            <th class="bs-table_td">顺利</th>
            <th class="bs-table_td"></th>
            <th class="bs-table_td">已审核</th>
            <th class="bs-table_td"></th>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_td">2018年四季度</th>
            <th class="bs-table_td">7.6</th>
            <th class="bs-table_td">顺利</th>
            <th class="bs-table_td"></th>
            <th class="bs-table_td">已审核</th>
            <th class="bs-table_td"></th>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_td">2019年一季度</th>
            <th class="bs-table_td">7.2</th>
            <th class="bs-table_td">顺利</th>
            <th class="bs-table_td"></th>
            <th class="bs-table_td">已审核</th>
            <th class="bs-table_td"></th>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_td">2019年二季度</th>
            <th class="bs-table_td">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入监测值"
                value="7.2"
                v-model="textarea">
              </el-input>
            </th>
            <th class="bs-table_td">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入存在困难或问题"
                value="顺利"
                v-model="textarea">
              </el-input>
            </th>
            <th class="bs-table_td">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入下步工作计划"
                value="按计划执行"
                v-model="textarea">
              </el-input>
            </th>
            <th class="bs-table_td" style="color: red; padding: 5px">已上报</th>
            <th class="bs-table_td">
              <el-button type="text" @click="auditProgress">审核</el-button>
            </th>
          </tr>
        </table>
      </div>
      <el-dialog title="进度审核" :visible.sync="progressAuditVisible" width="500px">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="saveAuditResult()">提交</el-button>
        </div>
      </el-dialog>
      <!--<div class="form-submit">-->
        <!--<el-button type="primary" @click.stop="goBack()">审核</el-button>-->
        <!--<el-button type="info" @click.stop="goBack()">关闭</el-button>-->
      <!--</div>-->
      <xieorg-tree :orgCodeVisiblesubmit="xieorgCodeVisiblesubmit" @orgCodeClick="xieorgCodeClick"
                   @orgCodeHandleClosesubmit="xieorgCodeHandleClosesubmit"
                   @orgCodeCheckChange="xieorgCodeCheckChange"></xieorg-tree>
    </div>
  </basic-container>
</template>

<script>
  import {pimWorkingItemRules, addTargetRules} from "@/const/infoRules";
  import {addWorkingItem} from "@/api/pim/pim";
  import {mapGetters} from "vuex";

  export default {
    name: "todoProgress",
    created() {
      this.tableData = []
    },
    computed: {
      ...mapGetters([
        "deptInfo"
      ])
    },
    data() {
      return {
        headerData: {
          title: '进度信息'
        },
        options: [{
          value: '0',
          label: '审核通过'
        }, {
          value: '2',
          label: '退回修改'
        }],
        progressAuditVisible: false,
        activeNames: ['1']
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      cancel(){
        this.progressAuditVisible = false;
      },
      auditProgress() {
        this.progressAuditVisible = true;
      },
      saveAuditResult(){
        this.progressAuditVisible = false;
      }
    }
  }
</script>

<style ang="scss" scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
